<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>换肤</title>
		<style type="text/css">
			html,
			body {
				height: 100%;
			}
			
			body {
				margin: 0;
				text-align: center;
				/*开始的背景*/
				background: url(5.jpg) no-repeat;
				background-size: 100% 100%;
				position: relative;
			}
			/*1上面的四幅图片*/
			
			#box1 img {
				width: 250px;
				height: 150px;
				margin: 20px 10px;
			}
			/*2 文字*/
			
			h1 {
				margin-top: 150px;
				position: absolute;
				bottom: 20px;
				right: 20px;
			}
			a
			{
				text-decoration: none;
				color: yellow;
				font-size: 40px;
			}
			a:hover
			{
				color: red;
			    cursor: pointer;
			}		
		</style>
	</head>

	<body>
		<!--1上面的四张图片-->
		<header>
			<div id="box1">
				<img src="1.jpeg" alt="">
				<img src="2.jpg" alt="">
				<img src="3.jpg" alt="">
				<img src="4.jpg" alt="">
				<div id='box2'></div>
			</div>
		</header>
		<!--2 文字-->
		<h1><a href="文字2.html">进 入 下 一 页</a></h1>

		<script type="text/javascript">
			var div = document.getElementById('box1');
			var body = document.body;
			var imgs = ["1.jpeg", "2.jpg", "3.jpg", "4.jpg"];
			var i = 0;
			setInterval(function() {
				if(i < imgs.length) {
					body.style.backgroundImage = "url(" + imgs[i++] + ")";
				} else {
					i = 0;
				}
			}, 2000);
		</script>
	</body>

</html>